<template>
    <div class="dhzn_logistcs">

        <div class="d_l-query">

            <el-form :model="formInline" class="demo-form-inline d_l-q-form" label-width="70px">
                <el-form-item class="d_l-q-f-label" label="快递单号">
                    <el-input class="d_lqf-l-input" v-model="formInline.number" placeholder="填写完整的快递单号" maxlength='18'></el-input>
                </el-form-item>
                <el-form-item  class="d_l-q-f-label" label="收件人">
                    <el-input v-model="formInline.name" placeholder="收件人姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>

        </div>

        <div class="d_l-list">

            <table class="d_l-l-table f14 tc" cellspacing="0" cellpadding="0" border="1">
                <thead>
                    <tr>
                        <th>单号</th>
                        <th>收件人</th>
                        <th>目前位置</th>
                        <th>预计到达时间</th>
                    </tr>
                </thead>

                <tbody>
                     <tr v-for="(item,key) in logdata" :key="key">
                        <td>{{item.numbers}}</td>
                        <td>{{item.recipients}}</td>
                        <td>{{item.location}}</td>
                        <td>{{item.scheduled}}</td>
                    </tr>
                </tbody>
            </table>

            <!-- <table class="d_l-l-table">
                <tr>
                    <th>单号</th>
                    <th>收件人</th>
                    <th>目前位置</th>
                    <th>预计到达时间</th>
                </tr>
                <tr v-for="(item,key) in logdata" :key="key">
                    <td>{{item.numbers}}</td>
                    <td>{{item.recipients}}</td>
                    <td>{{item.location}}</td>
                    <td>{{item.scheduled}}</td>
                </tr>
            </table> -->

            <div class="tc mt20">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    layout="prev, pager, next, jumper"
                    :page-count="pagecount"
                    >
                </el-pagination>
            </div>

        </div>

    </div>
</template>

<script>

export default {
    components: {},
    data() {
        return {
            // 表单动态绑定的值
            formInline: {
                number: '',
                name: ''
            },
            // 快递的数组
            logdata:[
                {numbers:"62304876554103261",recipients:'郑友荣',location:'福建清远',scheduled:"3天"},
                {numbers:"62304876554103261",recipients:'郑友荣',location:'福建清远',scheduled:"3天"},
                {numbers:"62304876554103261",recipients:'郑友荣',location:'福建清远',scheduled:"3天"},
                {numbers:"62304876554103261",recipients:'郑友荣',location:'福建清远',scheduled:"3天"},
                {numbers:"62304876554103261",recipients:'郑友荣',location:'福建清远',scheduled:"3天"},
                {numbers:"62304876554103261",recipients:'郑友荣',location:'福建清远',scheduled:"3天"},
                {numbers:"62304876554103261",recipients:'郑友荣',location:'福建清远',scheduled:"3天"},
                {numbers:"62304876554103261",recipients:'郑友荣',location:'福建清远',scheduled:"3天"},
            ],
            currentPage: 1,						//分页的默认页数
            pagecount: 0,						//总页数
        };
    },
    computed: {},
    watch: {},
    methods: {
        // 表单的提交函数
        onSubmit() {
            console.log('submit!');
        },
        //分页的跳页函数
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.requestdata()
        },
    },
    created() {},
    mounted() {},
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
    }
</script>
<style scoped>
    .dhzn_logistcs{
        height: calc(100% - 56px);
        box-sizing: border-box;
        /* background-color: #ffffff; */
    }
    /* 查询的表单样式 */
    .d_l-q-form{
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        padding: 0 20px;
        background-color: #ffffff;
        border-radius: 5px;
    }
    .el-form-item{
        margin: 15px 0;
    }
    .d_l-q-f-label{
        width: 40%;
    }
    .d_l-q-f-label>div.el-form-item__content{
        font-size: 40px;
    }
    /* 数据列表 */
    .d_l-list{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: calc(100% - 90px);
        background-color: #ffffff;
    }
    /* .d_l-l-table{
        text-align: center;
        width: 100%;
        background-color: #ffffff;
        border-collapse: collapse;
    }
    .d_l-l-table>tr:nth-child(even){
        background-color: #b4b4b4;
    }
    .d_l-l-table>tr>th,.d_l-l-table>tr>td{
        height: 50px;
    } */

    .d_l-l-table{
        width: 100%;
        color: #666666;
        border-bottom: 1px solid #e0e0e0;
        border-left: 1px solid  #e0e0e0;
        border-collapse: collapse;
    }
    .d_l-l-table thead tr{
        background-color: #F2F2F2;
    }
    .d_l-l-table tbody tr:hover{
        background-color: #F2F2F2;
    }
    .d_l-l-table th, .d_l-l-table td{
        min-height: 50px;
        padding: 10px;
        border-top: 1px solid #e0e0e0;
        border-right: 1px solid #e0e0e0;
    }
    /* 图片大小的 */
    .d_l-l-table tr td img{
        max-width: 120px;
        max-height: 80px;
    }
    /* el-button默认样式修改 */
    .el-button+.el-button{
        margin: 0;
    }
    .d_l-l-table tr td .el-button{
        padding: 9px 13px;
    }
</style>